<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const ruleFormRef = ref<FormInstance>();

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("验证码未填"));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error("Please input digits"));
    } else {
      if (value < 18) {
        callback(new Error("Age must be greater than 18"));
      } else {
        callback();
      }
    }
  }, 1000);
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("账号为必填"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass");
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码为必填"));
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  pass: "",
  checkPass: "",
  age: "",
});

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  age: [{ validator: checkAge, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<template>
  <div class="page">
    <el-card class="cardbox">
      <div class="card">
        <div class="left"></div>
        <div class="right">
          <el-form
            ref="ruleFormRef"
            style="width: 100%"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            label-position="top"
          >
            <el-form-item label="账号" prop="pass">
              <el-input
                v-model="ruleForm.pass"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="密码" prop="checkPass">
              <el-input
                v-model="ruleForm.checkPass"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="验证码" prop="age">
              <el-input v-model.number="ruleForm.age" />
            </el-form-item>
            <el-form-item>
              <el-col :span="10"><el-button style="width: 100%" type="primary" @click="submitForm(ruleFormRef)">
                  登录
                </el-button> </el-col>
              <el-col :span="4" class="text-center">
                <span class="text-gray-500"></span>
              </el-col>
              <el-col :span="10"><el-button style="width: 100%" @click="resetForm(ruleFormRef)">清空</el-button> </el-col>
    
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.page {
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  .cardbox {
    border-radius: 30px;
    .card {
      width: 960px;
      height: 520px;
      display: flex;
      align-items: center;

      .left {
        width: 480px;
        height: 100%;
        background-color: #409eff;
        border-radius: 30px 0 0 30px;
      }
      .right {
        flex: 1;
        height: 100%;
        background-color: #fff;
        border-radius: 0 30px 30px 0;
        padding: 20px 0 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
}
</style>
